<template>
  <div class="box" >
    <div id="pass" class="flex" style="width: 550px;height: 380px"></div>
    <div id="no-pass" class="flex"></div>
  </div>
</template>

<script>
  export default {
    name: "Audit",
    data() {
      return {
        option1:{
          title: {
            text: '审核未通过数',
            left:'center',
            top:10,
            textStyle:{
              fontSize:18,
              color:'#fff',
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.1],
            axisLine:{
              lineStyle:{
                color:'#fff'
              }
            }
          },
          yAxis: {
            type: 'category',
            data: ['一级', '二级', '三级', '四级'],
            axisLine:{
              lineStyle:{
                color:'#fff'
              }
            }
          },
          series: [
            {
              type: 'bar',
              barWidth:'45%',
              data: [1803, 23489, 2034, 1097],
              itemStyle: {
                normal: {
                  color: function(params) {
                    //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                    let colorList = ['#ff0000', '#FA5C24', '#FAC60E', '#3066E3'];
                    return colorList[params.dataIndex]
                  }
                }
              }
            }
          ]
        },
        /******************/
        option2:{
          title: {
            text: '审核未通过数',
            left:'center',
            top:10,
            textStyle:{
              fontSize:18,
              color:'#fff',
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.1],
            axisLine:{
              lineStyle:{
                color:'#fff'
              }
            }
          },
          yAxis: {
            type: 'category',
            data: ['一级', '二级', '三级', '四级'],
            axisLine:{
              lineStyle:{
                color:'#fff'
              }
            }
          },
          series: [
            {
              type: 'bar',
              barWidth:'45%',
              data: [18203, 23489, 29034, 104970],
              itemStyle: {
                normal: {
                  color: function(params) {
                    //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                    let colorList = ['#ff0000', '#FA5C24', '#FAC60E', '#3066E3'];
                    return colorList[params.dataIndex]
                  }
                }
              }
            }
          ]
        },
      }
    },
    mounted() {
      let insideChart = this.$echarts.init(document.getElementById('pass'));
      insideChart.setOption(this.option1);
      let outsideChart = this.$echarts.init(document.getElementById('no-pass'));
      outsideChart.setOption(this.option2);
    }
  }
</script>

<style scoped>
  .box {
    width: 1180px;
    height: 380px;
    display: flex;
  }
  .flex{
    flex: 1;
    width: 100%;
    background-color: rgba(37, 80, 174, 0.55);
  }
  .flex:first-child{
    margin-right: 10px;
  }
</style>
